<template>
  <div>
    <a-card style="padding: 2%">
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_LIST">
        <h1 style="font-size: 28px">权限管理</h1>
        <a-row :gutter="20">
          <a-col :span="9">
            <a-form-item label="查询权限" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <a-input v-model:value="queryContent" placeholder="请输入要查询的内容" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button @click="initQueryData" type="primary" block>
              <SearchOutlined />
              搜索
            </a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="resetData" block>
              <SyncOutlined />
              重置
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="4">
            <a-button @click="createPermission" type="primary" block> 新建 </a-button>
          </a-col>
          <a-col :span="4">
            <a-button @click="exportFile" type="primary" block> 下载 </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="24" style="margin-top: 30px">
            <a-table
              :columns="columns"
              :row-key="(record) => record.id"
              :data-source="dataList"
              :pagination="pageOptions"
              :loading="isLoading"
            >
              <template #status="{ record }">
                <div>
                  {{ record.status == 0 ? '正常' : '停用' }}
                </div>
              </template>
              <template #action="{ record }">
                <a-button type="link" @click="detailData(record)">
                  <UnorderedListOutlined />
                  详情
                </a-button>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </div>
      <div v-if="showType == SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL">
        <PermissionDetail :view-type="showType" :item="selectItem" @my-emit="callBack" />
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, onUnmounted, toRefs } from '@vue/runtime-core';
  import { columns } from '/@/views/core/permission/permissionIndex';
  import { reactive } from 'vue';
  import { SHOW_TYPE_ENUM } from '/@/enums/viewTypeEnum';
  import { HttpQueryResult } from '/@/api/core/model/coreModel';
  import { queryPermissonList } from '/@/api/core/permission';
  import { message } from 'ant-design-vue';
  import { CoreUtils } from '/@/utils/coreUtils';
  import PermissionDetail from './permissionDetail.vue';

  export default defineComponent({
    components: {
      PermissionDetail,
    },
    props: {
      total: {
        type: Number,
        default: 0,
      },
      current: {
        type: Number,
        default: 1,
      },
      pageSize: {
        type: Number,
        default: 15,
      },
    },
    setup(props, {}) {
      const data = reactive({
        showType: SHOW_TYPE_ENUM.SHOW_TYPE_LIST,
        selectItem: null,
        queryContent: '',
        dataList: [] as any[],
        isLoading: false,
        pageOptions: {
          total: props.total,
          current: props.current,
          pageSize: props.pageSize,
          pageSizeOptions: ['15', '30', '50', '100'],
          showSizeChanger: true, // 显示可改变每页数量
          showQuickJumper: false, // 是否显示跳转
          showTotal: (total: any) => `共 ${total} 条`, // 显示总数
          onChange: (current: any, pageSize: any) => {
            paginationChange({ current: current, pageSize: pageSize });
          },
          onShowSizeChange: (current: any, pageSize: any) => {
            paginationChange({ current: current, pageSize: pageSize });
          },
        },
      });

      const paginationChange = (pageData?: any) => {
        data.pageOptions.current = pageData.current;
        data.pageOptions.pageSize = pageData.pageSize;
        queryData();
      };

      // 查询
      const queryData = () => {
        data.isLoading = true;
        data.dataList = [];
        queryPermissonList({
          query_type: 0,
          query_content: data.queryContent,
          page_index: data.pageOptions.current,
          page_size: data.pageOptions.pageSize,
        }).then((result: HttpQueryResult) => {
          data.isLoading = false;
          if (result.code == 0) {
            data.pageOptions.total = result.data.total_size;
            data.dataList = result.data.data;
          }
        });
      };
      // 手动查询，需要重置起始页
      const initQueryData = () => {
        data.pageOptions.current = 1;
        queryData();
      };
      // 重置
      const resetData = () => {
        data.queryContent = '';
        data.pageOptions.current = 1;
        queryData();
      };

      // 新建
      const createPermission = () => {
        message.warn('暂未开放，敬请期待');
      };
      // 下载
      const exportFile = () => {
        message.warn('暂未开放，敬请期待');
      };
      // 详情
      const detailData = (item) => {
        data.selectItem = item;
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_DETAIL;
      };

      // Emit
      const callBack = (item) => {
        CoreUtils.console_log(item);
        data.showType = SHOW_TYPE_ENUM.SHOW_TYPE_LIST;
        queryData();
      };

      onMounted(() => {
        queryData();
      });

      // 销毁
      onUnmounted(() => {});

      return {
        ...toRefs(data),
        SHOW_TYPE_ENUM,
        columns,
        initQueryData,
        resetData,
        createPermission,
        exportFile,
        detailData,
        callBack,
      };
    },
  });
</script>

<style scoped></style>
